<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      /* 取消掉list每个前面的点 */
    }

    .carousel {
      margin-top: 50px;
      margin-left: 200px;
      width: 1000px;
      height: 437.5px;
      position: relative;
    }

    .cal-list {
      width: 1000px;
      height: 437.5px;
      position: relative;
      overflow: hidden;
      /* 超出界限不显示 */
    }

    .viewpage {
      position: absolute;
      left: 0;
      top: 0;
      width: 700%;
    }

    .item {
      float: left;
    }

    .pic {
      width: 1000px;
      height: 437.5px;
    }

    .pre,
    .next {
      width: 30px;
      height: 50px;
      background-color: rgba(255, 255, 255, .5);
      position: absolute;
      top: 40%;
      color: #000000;
      font-size: 25px;
      text-align: center;
      border-radius: 0 25px 25px 0;
    }

    .next {
      left: 970px;
      top: 40%;
      border-radius: 25px 0 0 25px;
    }

    .circle-list {
      padding: 10px;
      position: absolute;
      bottom: 10px;
      margin-left: -60px;
      width: 125px;
      background-color: rgba(255, 255, 255, .7);
      border-radius: 50px;
      left: 50%;
    }

    .circle {
      float: left;
      margin-left: 5px;
      width: 15px;
      height: 15px;
      background-color: pink;
      cursor: pointer;
      border-radius: 50%;
    }

    .active {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <!-- 轮播图 -->
  <div class="carousel">
    <!-- 所有图片，图片列表 -->
    <div class="cal-list">
      <ul class="viewpage">
        <li class="item"><img src="./img/微信图片_20240416090929.png" class="pic" alt=""></li>
        <li class="item"><img src="./img/微信图片_20240416090945.png" class="pic" alt=""></li>
        <li class="item"><img src="./img/微信图片_20240416090952.png" class="pic" alt=""></li>
        <li class="item"><img src="./img/微信图片_20240416090957.png" class="pic" alt=""></li>
        <li class="item"><img src="./img/微信图片_20240416091002.png" class="pic" alt=""></li>
        <li class="item"><img src="./img/微信图片_20240416091007.png" class="pic" alt=""></li>
      </ul>
      <div class="pre">&lt;</div>
      <div class="next">&gt;</div>
    </div>
    <div class="circle-list">
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
      <span class="circle"></span>
    </div>
  </div>


</body>
<script src=".\js\utils.js"></script>
<script>
  var pre = document.getElementsByClassName('pre')[0]
  var next = document.getElementsByClassName('next')[0]
  var cal = document.getElementsByClassName('cal-list')[0]
  var viewpage = document.getElementsByClassName('viewpage')[0]
  var items = document.getElementsByClassName('item')
  var circleList = document.getElementsByClassName('circle-list')[0]
  var circles = document.getElementsByClassName('circle')
  var index = 0//图片索引
  var circleIndex = 0//焦点索引s
  //图片轮播
  var lunBoInter
  function autoPlay() {
    lunBoInter = setInterval(function () {
      index++
      circleIndex++
      if (index >= items.length) {
        index = 0
        viewpage.style.left = -1000 * 0 + 'px'
      }
      if (circleIndex == circles.length) {
        circleIndex = 0
      }
      //初始化颜色  设置当前焦点颜色  改变class名
      initColor(circles)
      circles[circleIndex].className = 'circle active'

      var target = -1000 * index
      moveAnimation(viewpage, target)
    }, 5000)
  }
  autoPlay()
  //鼠标悬停停止轮播
  cal.onmouseover = function (e) {
    clearInterval(lunBoInter)
    pre.style.display = 'block'
    next.style.display = 'block'
  }
  //鼠标离开继续轮播
  cal.onmouseleave = function (e) {
    autoPlay()
    pre.style.display = 'none'
    next.style.display = 'none'
  }
  //下一张  按钮
  next.onclick = function (e) {
    index++
    circleIndex++
    if (circleIndex == circles.length) {
      circleIndex = 0
    }
    if (index == items.length) {
      index = 0
      viewpage.style.left = 0 + 'px'
    }
    //初始化所有颜色  设置当前焦点颜色
    initColor(circles)
    circles[circleIndex].className = 'circle active'
    var target = -1000 * index
    moveAnimation(viewpage, target)
  }
  //上一张  按钮
  pre.onclick = function (e) {

    index--
    circleIndex--
    if (index == 0) {
      index = items.length
      viewpage.style.left = 0 + 'px'
    }
    if (circleIndex < 0) {
      circleIndex = circles.length
    }
    //初始化所有颜色  设置当前焦点颜色
    initColor(circles)
    circles[circleIndex].className = 'circle active'
    var target = -1000 * index
    moveAnimation(viewpage, target)
  }
  function initColor(arr) {
    for (var i = 0; i < arr.length; i++) {
      arr[i].className = 'circle'
    }
  }
  //循环添加焦点事件
  for (var i = 0; i < circles.length; i++) {
    circles[i].index = i
    circles[i].onclick = function (e) {
      index = this.index
      circleIndex = index
      initColor(circles)
      circles[circleIndex].className = 'circle active'
      var target = -1000 * index
      moveAnimation(viewpage, target)
    }
  }
</script>

</html>